Web development and Tech news Blog site. WEBISFREE.com

HOME > lodash

[lodash] Understanding the compact() Method

Last Modified : 23 Feb, 2023 / Created : 23 Feb, 2023
612
View Count
Today, we're going to take a look at the lodash compact() method. My personal goal is to share all information related to lodash. I've been consistently posting about lodash lately, and I plan to continue sharing more lodash-related posts in the future.




# Understanding the lodash compact() Method


As always, let's start by understanding the literal meaning of "compact". The English word "compact" means something that is small, simple, or tightly packed.

In short, it means to make something smaller while making it more solid. The lodash compact() method seems to work in this way as well. The compact() method is used on arrays to remove all falsy values. By removing falsy values, the array becomes more concise, or "compact". To summarize, the syntax for using the method is as follows:

_.compact(array)

// Removes falsy values (null, undefined, 0, '', NaN) from the array and returns the remaining values


In practical use cases where large amounts of data are being processed, the compact() method is very useful for removing unnecessary values from arrays. Rather than iterating over the array to remove unwanted values one by one, it's more convenient to return falsy values and then use the array method filter() to remove them all at once. Let's take a look at a simple example below.


! Example of lodash compact()


Below are the results of using _.compact() on arrays with various falsy values. Let's take a look at how each one is returned.

Before we begin, what happens if no values are entered? In this case, an empty array is returned by default.
_.compact()

// Result
[]

Here is an example applied to numbers. Since it includes 0, we can expect that 0 will be removed and returned.
var myNumbers = [ 1, 2, 0, 4, 5 ]
_.compact(myNumbers )

// Result
[ 1, 2, 4, 5 ]

As expected, the result excluded 0 and was returned.

Now let's apply it to a case where there are various falsy values and check the result.
_.compact([ 'web', 'is', undefined, 'free'])
_.compact([ 3, 5, NaN ])
_.compact([ null, undefined, -1, 1 ])
_.compact([true, false])

// Results
[ 'web', 'is', 'free' ]
[ 3, 5 ]
[ -1, 1 ]
[ true ]

As you can see, all the values that correspond to falsy have been excluded and returned. Since it easily removes falsy values, it can make the code much simpler and more compact!!


! Implementing with JavaScript array method filter()


Let's compare the first example with the one that uses lodash's compact(). Let's take a look at the example we looked at earlier.
var myNumbers = [ 1, 2, 0, 4, 5 ]
_.compact(myNumbers )

// Result
[ 1, 2, 4, 5 ]

Let's change the above code using the JavaScript array method filter(). First, we need a function to remove falsy values. We can create it using an Arrow function like this:
(item) => { return item }
item => item

Both functions are equivalent. Let's apply them and check the result again.
myNumbers.filter(item => item)

// Result
[1, 2, 4, 5]

The same approach can be applied to the following example.
[ 'web', 'is', undefined, 'free'].filter(item => item)
[ 3, 5, NaN ].filter(item => item)
[ null, undefined, -1, 1 ].filter(item => item)
[true, false].filter(item => item)

// Results
[ 'web', 'is', 'free' ]
[ 3, 5 ]
[ -1, 1 ]
[ true ]

And the result will be the same.


We've looked at the lodash method compact() so far.

Perhaps you're looking for the following text as well?

    Previous

    [lodash] Understanding chunk